<template>
  <div class="row item">
    <img :src="product.imgUrl" class="img-thumbnail item-img">
    <div class="item-content">
      <div><strong>{{ product.name }}</strong></div>
      <div>{{ product.desc }}</div>
      <!-- &yen;为人民币符号 &times;为乘号-->
      <div>
        <strong class="price">
          <!-- &yen;{{ product.price | formatPrice }} -->
          {{ product.price | formatPrice }}
        </strong> 
        <small>
          &times;{{$props.cartItem.quantity}}
        </small>
      </div>
    </div>
    
    <div class="item-operate">
        <img src="../assets/Shopping_Cart_Add_24px.png" 
        @click="addCart(product)">
        <img src="../assets/Shopping_Cart_Remove_24px.png" 
         @click="removeCart(product)">
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import icons from '../resx/Icons.js'

  export default {
    props: {
      cartItem: {
        type: Object,
        default: function () {
          return {
            id: -1,
            quantity: 1
          }
        }
      }
    },
    computed: {
      product () {
        // 注意此处不能用const，因为未能获取到product时，后面要给它赋一个默认对象
        let p = this.$store.getters.getProductById(this.$props.cartItem.id)
        if (!p) {
          p = {
            type: 1,
            id: 1,
            name: '未知',
            inventory: 1000,
            desc: '无',
            price: 0,
            imgUrl: icons.logo
          }
        }
        return p
      }
    },
    methods: mapActions([
      'addCart',
      'removeCart'
    ])
    // 局部过滤器，仅对当前组件有效，即使对子组件也无效
    // filters: {
    //   formatPrice: function (price) {
    //     return price.toFixed(2)
    //   }
    // }
  }
</script>

<style scoped>

.item {
  position: relative;
  /* 行间距 */
  margin-bottom: 20px;
  
  border: 1px solid #ddd;
  padding: 10px;
}

@media (min-width: 768px) {
 
  .item {
    /* 水平居中 */
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }
}

.item-img {
  float: left;
  width: 80px;
}


.item-content {
  width: 100%;
  /* 空出右边img所占空间 */
  padding-left: 100px;
}

.item-operate {
  position: absolute;
  top:6px;
  right: 6px;
}

.item-operate img {  
  height:24px;
  padding: 2px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.item-operate img:hover {
  border: 1px solid rebeccapurple;
}
</style>